<template>
  <div class="banner-list">
    <div class="banner-list-head">
      <el-button
        type="danger"
        icon="Delete"
        :disabled="selectids.length === 0"
        @click="handledelselect"
      >
        删除选中
      </el-button>

      <el-button
        icon="Plus"
        @click="$router.push('/banner/add')"
        type="success"
      >
        新增
      </el-button>

      <el-button icon="Refresh" @click="getdata()"></el-button>
    </div>
    <el-table
      :data="bannerlist"
      style="width: 100%"
      @selection-change="handleselectchange"
    >
      <el-table-column type="selection" width="100" />
      <el-table-column label="图片">
        <template #default="scope">
          <img :src="scope.row.img" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="alt" label="描述" />
      <el-table-column prop="link" label="链接" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="small"
            type="danger"
            @click="handleDel(scope.row.bannerid, scope)"
            >删除</el-button
          >
        </template>
      </el-table-column>

      <!-- 空数据显示画面 -->
      <template #empty>
        <el-empty description="无数据" />
      </template>
    </el-table>

    <!-- 分页器 
    hide-on-single-page只有一页隐藏
    -->
    <div class="pagination">
      <el-pagination
        background
        layout="total,prev, pager, next,"
        :total="list.length"
        v-model:current-page="page"
        v-model:page-size="pageSize"
      />
    </div>
  </div>
</template>

<script>
import { bannerdata } from "@/api/banner.js";
import { delbannerdata } from "@/api/banner.js";

export default {
  name: "banner-list",

  data() {
    return {
      //轮播图数据
      list: [],
      // 当前页
      page: 1,
      // 每页显示条数
      pageSize: 8,
      selectids: [],
    };
  },

  computed: {
    bannerlist() {
      return this.list.slice(
        (this.page - 1) * this.pageSize,
        this.page * this.pageSize
      );
    },
  },

  methods: {
    handleDel(id) {
      console.log(id);
      delbannerdata(id).then((data) => {
        console.log(data);
        this.getdata();
      });
    },
    getdata() {
      bannerdata().then((data) => {
        this.list = data.data;
        console.log(data);
      });
    },
    handleselectchange(selection) {
      this.selectids = selection.map((item) => item.bannerid);
      // console.log(selection);
      console.log(this.selectids);
    },
    handledelselect() {
      console.log("删除成功");
    },
  },

  mounted() {
    this.getdata();
  },
};
</script>

<style lang="scss" scoped>
.banner-list {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  img {
    height: 80px;
  }
  .pagination,
  .banner-list-head {
    padding: 10px 0;
    display: flex;
    justify-content: flex-end;
  }
  .el-table {
    flex: 1;
  }
}
</style>
